/* *
@Author: MaLiang
@Date: 2021-08-25
@LastEditors: --
@LastEditTime: --
@path: src/components/common/HeaderPlaceholder.tsx
@Description: qmp子应用头部占位元素
* */
import { defineComponent, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
interface PlaceholderStyleResult {
  height: string
}
const HeaderPlaceholder = defineComponent({
  name: 'HeaderPlaceholder',
  setup() {
    const $route = useRoute()
    const $store = useStore()
    const placeholderHeight = computed((): PlaceholderStyleResult => {
      return {
        height: $store.getters['app/headerBarHeight'] + 'px'
        // height: $store.getters['app/headerBarHeight'] + ($route.meta.nativeAppStatusBarHeight || 0) + 'px'
      }
    })
    return () => {
      return <div style={placeholderHeight.value}></div>
    }
  }
})

export default HeaderPlaceholder
